<template>
  <div>
    <MyTabs :tab-list="tabList"></MyTabs>
    <div class="question-header">
      <div class="title">{{ topicTitle }}</div>
      <div class="name">{{ `学员：${topicName}` }}</div>
    </div>
    <div class="question-body" v-for="(part, j) in testParts" :key="part.id">
      <Question
        v-for="(item, index) in part.value"
        :key="item.id"
        :question="item"
        :qIndex="addNum(j) + (index + 1)"
        :qType="item.question_type"
        :qScore="item.score"
        :level="1"
        is_border
        :answerStatus="answerStatus"
        :options="setOptionsAnswer(item)"
        :answer="setCorrectAnswer(item)"
        @change="handleChangeScore($event, item.topic_level, part.id)"
      ></Question>
    </div>
    <EduNoData v-if="$util.isEmpty(testParts)"></EduNoData>
    <div class="question-footer" v-if="answerStatus == 1">
      <el-button type="primary" size="mini" @click="handleSubmit">提交阅卷</el-button>
    </div>
  </div>
</template>

<script>
import MyTabs from '../../../components/myTab.vue'
import EduNoData from '@/components/EduNoData'
import Question from './components/question'
/** 累加器 **/
const sum = (...arr) => [].concat(...arr).reduce((acc, val) => acc + val, 0)
export default {
  components: {
    MyTabs,
    Question,
    EduNoData
  },
  data() {
    return {
      tabList: [
        {
          title: '考试'
        }
      ],
      topicTitle: '',
      topicName: '',
      answerStatus: 0,
      testParts: [],
      paperUserData: []
    }
  },
  created() {
    this.getPaperList()
    this.status = parseInt(this.$route.query.status)
  },
  methods: {
    // 计算答题卡试题编号
    addNum(i) {
      let numArr = this.testParts.map(item => item.value.length)
      let newArr = numArr.slice(0, i)
      return sum(newArr)
    },
    getPaperList() {
      this.$api.getExamPaperUserFetch(
        {
          record_id: this.$route.query.record_id,
          paper_id: this.$route.query.paper_id
        },
        res => {
          const { data } = res
          this.topicTitle = data.paper_title
          this.topicName = data.nick_name
          this.answerStatus = data.answer_status
          this.testParts = data.paper_parts
        }
      )
    },
    handleSubmit() {
      this.$api.postExamPaperUser(
        {
          record_id: this.$route.query.record_id,
          data: JSON.stringify(this.paperUserData)
        },
        res => {
          this.$message.success(res.msg)
          this.$router.replace({ path: '/my/classes/correcting' })
        }
      )
    },
    // 设置选项的答案
    setOptionsAnswer(item) {
      const _this = this
      let answer
      if (_this.$util.inArray(item.question_type, [1, 2])) {
        if (_this.$util.isEmpty(item.answer_data)) answer = ''
        else answer = parseInt(item.answer_data.toString())
      } else if (_this.$util.inArray(item.question_type, [3, 4])) {
        if (_this.$util.isEmpty(item.answer_data)) return []
        answer = item.answer_data.map(Number)
      } else if (item.question_type == 5) {
        if (_this.$util.isEmpty(item.answer_data)) {
          answer = []
          item.options.forEach(topic => {
            answer.push('')
          })
        } else {
          answer = item.answer_data
        }
      } else if (item.question_type == 7) {
        answer = []
        item.topics.forEach(topic => {
          if (_this.$util.isEmpty(topic.answer_data)) {
            answer.push('')
          } else {
            answer.push(parseInt(topic.answer_data.toString()))
          }
        })
      } else if (item.question_type == 8) {
        if (_this.$util.isEmpty(item.answer_data)) {
          answer = ''
        } else {
          answer = item.answer_data.toString()
        }
      }
      return answer
    },
    // 获取正确的答案
    setCorrectAnswer(item) {
      let answer
      if (this.$util.inArray(item.question_type, [1, 2, 3, 4])) {
        let topic = item.options.filter(item => item.is_right == 1)
        answer = topic.map(item => item.key)
      } else if (item.question_type == 5) {
        answer = item.options.map(item => item.values)
      } else if (item.question_type == 7) {
        // 完型填空合拼正确的试题数组
        let topic = item.topics.reduce(
          (pre, cur) => pre.concat(cur.options.filter(item => item.is_right == 1)),
          []
        )
        answer = topic.map(item => item.key)
      } else if (item.question_type == 8) {
        answer = [item.reference_answer]
      }
      return answer
    },
    // 设置分数
    handleChangeScore(data, level, pid) {
      let index = this.paperUserData.findIndex(
        item => item.topic_id === data.topic_id && item.part_id === pid
      )
      if (this.$util.isEmpty(this.paperUserData) || index == -1) {
        this.paperUserData.push({
          part_id: pid,
          topic_id: data.topic_id,
          topic_level: level,
          score: data.value
        })
      } else {
        this.paperUserData.forEach(item => {
          if (item.topic_id === data.topic_id && item.part_id === pid) {
            item.score = data.value
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.question-header {
  padding: 12px 8px;
  display: flex;
  justify-content: space-between;
  background: rgba(44, 146, 248, 0.05);
  .title {
    font-size: 14px;
    font-weight: 500;
    color: $text-color-import;
  }
  .name {
    font-size: 14px;
    font-weight: 400;
    color: $text-color-secondary;
  }
}
.question-body {
  ::v-deepp {
    margin: 0;
  }
  .item {
    padding: 15px 0;
    border-bottom: 1px solid $border-color-divider;
    .header {
      font-size: 14px;
      font-weight: 400;
      color: $text-color-import;
      line-height: 24px;
      @include clearfix();
      .key {
        float: left;
      }
    }
    .answer {
      margin-top: 9px;
      font-size: 13px;
      font-weight: 400;
      color: $text-color-import;
      line-height: 24px;
      span {
        font-weight: 500;
      }
    }
    .analyze {
      margin-top: 12px;
      font-size: 13px;
      font-weight: 400;
      color: $text-color-secondary;
      line-height: 24px;
      @include clearfix();
      .label {
        color: #67c23a;
        float: left;
      }
    }
    .score {
      margin-top: 12px;
      .label {
        margin-right: 9px;
        font-size: 13px;
        font-weight: 400;
        color: $text-color-import;
      }
    }
    .num {
      margin-top: 12px;
      font-size: 14px;
      font-weight: 400;
      color: $text-color-error;
    }
  }
}
.question-footer {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style>
